<template>
  <view class="ear-container">

    
    <!-- 标签页 -->
    <view class="tabs">
      <view 
        class="tab-item" 
        :class="{ active: activeTab === tab.key }"
        v-for="tab in tabs" 
        :key="tab.key"
        @click="switchTab(tab.key)"
      >
        <text class="tab-text">{{ tab.name }}</text>
      </view>
    </view>
    
    <!-- 播放按钮 -->
    <view class="play-all-container" @click="playAll">
      <view class="play-icon-circle">
        <text class="play-icon">▶</text>
      </view>
      <text class="play-all-text">播放全部</text>
    </view>
    
    <!-- 音频列表 -->
    <scroll-view class="audio-list" scroll-y>
      <view 
        class="audio-item" 
        v-for="(audio, index) in currentAudioList" 
        :key="audio.id"
        @click="playAudio(audio, index)"
      >
        <view class="audio-number">
          <text class="number-text">{{ index + 1 }}</text>
        </view>
        <view class="audio-icon">
          <text class="icon-emoji">{{ audio.icon }}</text>
        </view>
        <view class="audio-info">
          <text class="audio-title">{{ audio.title }}</text>
          <text class="audio-subtitle">{{ audio.subtitle }}</text>
        </view>
        <view class="delete-btn" @click.stop="deleteAudio(audio.id)">
          <text class="delete-icon">🗑</text>
        </view>
      </view>
    </scroll-view>
    
    <!-- 底部播放控制栏 -->
    <view class="player-bar" v-if="currentAudio">
      <text class="current-title">正在播放：{{ currentAudio.title }}</text>
      <view class="player-controls">
        <view class="control-btn" @click="previousAudio">
          <text class="control-icon">⏮</text>
        </view>
        <view class="control-btn" @click="togglePlay">
          <text class="control-icon">{{ isPlaying ? '⏸' : '▶' }}</text>
        </view>
        <view class="control-btn" @click="nextAudio">
          <text class="control-icon">⏭</text>
        </view>
        <view class="control-btn" @click="showPlaylist">
          <text class="control-icon">📋</text>
        </view>
        <view class="control-btn" @click="showSettings">
          <text class="control-icon">⚙</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      statusBarHeight: 0,
      activeTab: 'recent',
      isPlaying: false,
      currentAudio: null,
      currentIndex: 0,
      tabs: [
        { key: 'recent', name: '最近' },
        { key: 'english', name: '英文' },
        { key: 'chinese', name: '中文' },
        { key: 'favorite', name: '收藏' }
      ],
      audioData: {
        recent: [
          {
            id: 1,
            title: 'House for Sale',
            subtitle: '英文经典音频',
            icon: '📘'
          },
          {
            id: 2,
            title: '蜗迁伦',
            subtitle: '中文古诗音频',
            icon: '📗'
          },
          {
            id: 3,
            title: 'Floppy Floppy',
            subtitle: '英文经典音频',
            icon: '🐶'
          },
          {
            id: 4,
            title: 'Who Is It?',
            subtitle: '英文经典音频',
            icon: '🦊'
          },
          {
            id: 5,
            title: '猫和老鼠',
            subtitle: '中文故事音频',
            icon: '🐱'
          },
          {
            id: 6,
            title: 'Twinkle Twinkle',
            subtitle: '英文儿歌',
            icon: '🎵'
          },
          {
            id: 7,
            title: '静夜思',
            subtitle: '中文古诗朗读',
            icon: '🌙'
          }
        ],
        english: [
          {
            id: 1,
            title: 'House for Sale',
            subtitle: '英文经典音频',
            icon: '📘'
          },
          {
            id: 3,
            title: 'Floppy Floppy',
            subtitle: '英文经典音频',
            icon: '🐶'
          },
          {
            id: 4,
            title: 'Who Is It?',
            subtitle: '英文经典音频',
            icon: '🦊'
          },
          {
            id: 6,
            title: 'Twinkle Twinkle',
            subtitle: '英文儿歌',
            icon: '🎵'
          }
        ],
        chinese: [
          {
            id: 2,
            title: '蜗迁伦',
            subtitle: '中文古诗音频',
            icon: '📗'
          },
          {
            id: 5,
            title: '猫和老鼠',
            subtitle: '中文故事音频',
            icon: '🐱'
          },
          {
            id: 7,
            title: '静夜思',
            subtitle: '中文古诗朗读',
            icon: '🌙'
          }
        ],
        favorite: [
          {
            id: 1,
            title: 'House for Sale',
            subtitle: '英文经典音频',
            icon: '📘'
          },
          {
            id: 7,
            title: '静夜思',
            subtitle: '中文古诗朗读',
            icon: '🌙'
          }
        ]
      }
    }
  },
  
  computed: {
    currentAudioList() {
      return this.audioData[this.activeTab] || [];
    }
  },
  
  onLoad() {
    // 获取状态栏高度
    const systemInfo = uni.getSystemInfoSync();
    this.statusBarHeight = systemInfo.statusBarHeight || 0;
    
    // 设置默认播放音频
    if (this.currentAudioList.length > 0) {
      this.currentAudio = this.currentAudioList[0];
    }
  },
  
  methods: {
    /**
     * 返回上一页
     */
    goBack() {
      uni.navigateBack();
    },
    
    /**
     * 清空全部
     */
    clearAll() {
      uni.showModal({
        title: '提示',
        content: '确定要清空所有音频吗？',
        success: (res) => {
          if (res.confirm) {
            this.audioData[this.activeTab] = [];
            if (this.currentAudio) {
              this.currentAudio = null;
              this.isPlaying = false;
            }
            uni.showToast({
              title: '已清空',
              icon: 'success'
            });
          }
        }
      });
    },
    
    /**
     * 切换标签页
     */
    switchTab(tabKey) {
      this.activeTab = tabKey;
    },
    
    /**
     * 播放全部
     */
    playAll() {
      if (this.currentAudioList.length === 0) {
        uni.showToast({
          title: '暂无音频',
          icon: 'none'
        });
        return;
      }
      
      this.currentAudio = this.currentAudioList[0];
      this.currentIndex = 0;
      this.isPlaying = true;
      
      uni.showToast({
        title: '开始播放全部',
        icon: 'success'
      });
    },
    
    /**
     * 播放音频
     */
    playAudio(audio, index) {
      this.currentAudio = audio;
      this.currentIndex = index;
      this.isPlaying = true;
      
      uni.showToast({
        title: `正在播放：${audio.title}`,
        icon: 'none'
      });
    },
    
    /**
     * 删除音频
     */
    deleteAudio(audioId) {
      const index = this.audioData[this.activeTab].findIndex(item => item.id === audioId);
      if (index > -1) {
        this.audioData[this.activeTab].splice(index, 1);
        
        // 如果删除的是当前播放的音频
        if (this.currentAudio && this.currentAudio.id === audioId) {
          this.currentAudio = null;
          this.isPlaying = false;
        }
        
        uni.showToast({
          title: '已删除',
          icon: 'success'
        });
      }
    },
    
    /**
     * 切换播放状态
     */
    togglePlay() {
      this.isPlaying = !this.isPlaying;
      uni.showToast({
        title: this.isPlaying ? '继续播放' : '暂停播放',
        icon: 'none'
      });
    },
    
    /**
     * 上一首
     */
    previousAudio() {
      if (this.currentIndex > 0) {
        this.currentIndex--;
        this.currentAudio = this.currentAudioList[this.currentIndex];
        uni.showToast({
          title: `上一首：${this.currentAudio.title}`,
          icon: 'none'
        });
      } else {
        uni.showToast({
          title: '已是第一首',
          icon: 'none'
        });
      }
    },
    
    /**
     * 下一首
     */
    nextAudio() {
      if (this.currentIndex < this.currentAudioList.length - 1) {
        this.currentIndex++;
        this.currentAudio = this.currentAudioList[this.currentIndex];
        uni.showToast({
          title: `下一首：${this.currentAudio.title}`,
          icon: 'none'
        });
      } else {
        uni.showToast({
          title: '已是最后一首',
          icon: 'none'
        });
      }
    },
    
    /**
     * 显示播放列表
     */
    showPlaylist() {
      uni.showToast({
        title: '播放列表',
        icon: 'none'
      });
    },
    
    /**
     * 显示设置
     */
    showSettings() {
      uni.showToast({
        title: '播放设置',
        icon: 'none'
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.ear-container {
  background-color: #f8f9fa;
  min-height: 100vh;
  padding-bottom: 120rpx;
}

.status-bar {
  width: 100%;
  background-color: #fff;
}

// 顶部导航栏
.header {
  background: #fff;
  padding: 30rpx 40rpx;
  display: flex;
  align-items: center;
  position: relative;
  
  .back-btn {
    position: absolute;
    left: 40rpx;
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    
    .back-icon {
      font-size: 48rpx;
      color: #333;
      font-weight: bold;
    }
  }
  
  .title {
    flex: 1;
    text-align: center;
    font-size: 36rpx;
    font-weight: 600;
    color: #333;
  }
  
  .clear-all-btn {
    position: absolute;
    right: 40rpx;
    
    .clear-text {
      font-size: 28rpx;
      color: #666;
    }
  }
}

// 标签页
.tabs {
  background: #fff;
  display: flex;
  padding: 0 40rpx;
  border-bottom: 1rpx solid #f0f0f0;
  
  .tab-item {
    flex: 1;
    padding: 30rpx 0;
    text-align: center;
    position: relative;
    
    .tab-text {
      font-size: 32rpx;
      color: #666;
    }
    
    &.active {
      .tab-text {
        color: #4facfe;
        font-weight: 600;
      }
      
      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 60rpx;
        height: 4rpx;
        background: #4facfe;
        border-radius: 2rpx;
      }
    }
  }
}

// 播放按钮
.play-all-container {
  padding: 40rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  
  .play-icon-circle {
    width: 80rpx;
    height: 80rpx;
    background: #4facfe;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    
    .play-icon {
      font-size: 28rpx;
      color: #fff;
      margin-left: 4rpx;
    }
    
    &:active {
      opacity: 0.8;
    }
  }
  
  .play-all-text {
    font-size: 32rpx;
    color: #333;
    font-weight: 600;
  }
  
  &:active {
    opacity: 0.8;
  }
}

// 音频列表
.audio-list {
  flex: 1;
}

.audio-item {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  display: flex;
  align-items: center;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  
  .audio-number {
    width: 60rpx;
    height: 60rpx;
    background: #4facfe;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 30rpx;
    
    .number-text {
      font-size: 28rpx;
      color: #fff;
      font-weight: 600;
    }
  }
  
  .audio-icon {
    margin-right: 30rpx;
    
    .icon-emoji {
      font-size: 48rpx;
    }
  } 
  
  .audio-info {
    flex: 1;
    
    .audio-title {
      font-size: 32rpx;
      color: #333;
      font-weight: 600;
      display: block;
      margin-bottom: 10rpx;
    }
    
    .audio-subtitle {
      font-size: 26rpx;
      color: #999;
    }
  }
  
  .delete-btn {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    
    .delete-icon {
      font-size: 32rpx;
      color: #ccc;
    }
    
    &:active {
      .delete-icon {
        color: #ff4757;
      }
    }
  }
  
  &:active {
    background: #f8f9fa;
  }
}

// 底部播放控制栏
.player-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  padding: 20rpx 40rpx;
  border-top: 1rpx solid #f0f0f0;
  z-index: 999;
  
  .current-title {
    font-size: 28rpx;
    color: #333;
    margin-bottom: 20rpx;
    display: block;
    text-align: center;
  }
  
  .player-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40rpx;
    
    .control-btn {
      width: 80rpx;
      height: 80rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      
      .control-icon {
        font-size: 32rpx;
        color: #4facfe;
      }
      
      &:active {
        opacity: 0.6;
      }
    }
  }
}
</style>